<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="20">
        <a-col :xxl="10" :xl="10" :lg="10" :sm="24">
          <a-form-item label="活动名称">
            <a-input
              allowClear
              v-model="queryParam.name"
              placeholder="请输入活动名称进行搜索"
            />
          </a-form-item>
        </a-col>
        <a-col :xxl="14" :xl="14" :lg="14" :sm="24">
          <span class="table-page-search-submitButtons">
            <a-button  @click="search" type="primary">查询</a-button>
            <a-button style="margin-left: 8px"  @click="reset">重置</a-button>
            <a-button  style="margin-left: 8px" type="primary" @click="handleAdd">新增</a-button>
            <!-- <a-upload
              accept=".csv, application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
              name="file"
              :showUploadList="false"
              :multiple="false"
              :data="uploadData"
              :action="uploadUrl"
              @change="handleChange"
            >
              <a-button style="margin-left: 8px"  type="primary">导入</a-button>
            </a-upload> -->
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
export default {
  props: {
  },
  data() {
    return {
      queryParam:{
      },
      uploadData: {
        pageId: this.$route.params.id
      },
      uploadUrl: '',
    }
  },
  computed: {
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 批量添加发放对象
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.refreshSendUserList()
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },

    // 新增
    handleAdd() {
     this.$emit('onAdd', null)
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    search() {
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    reset() {
      this.queryParam = {
        department: '',
        remarks: ''
      }
      let queryParam = this.filterFields(this.queryParam)
      this.$emit('onSearch', queryParam)
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] && values[i].length) {
          if (i === 'time') {
            formValue.startTime = values[i][0]
            formValue.endTime = values[i][1]
          } else {
            formValue[i] = values[i]
          }

        }
      })
      return formValue
    },
  }
}
</script>
<style lang="less" scoped>
.table-page-search-submitButtons {
  display: flex;
  justify-content: flex-end;
}
</style>
<style scoped>
  /* For demo */
  .ant-carousel >>> .slick-slide {
    text-align: center;
    height: 160px;
    line-height: 160px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel >>> .slick-slide h3 {
    color: #fff;
  }
</style>
